<template>
  <!-- 头部 -->
  <div class="topBox" style="z-index: 9999">
    <!-- LOGO -->
    <div class="L"><a href="index.html">LOGO</a></div>
    <!-- 搜索框 -->
    <div class="C" @click="ShowProductIndex">
      <div class="saerchbox">
        <input name="" type="text" placeholder="请输入您要搜索的内容" />
        <img src="/assets/images/ss.png" />
      </div>
    </div>
    <!-- 弹出层 -->
    <div class="R" @click="ShowType = true">
      <img src="/assets/images/tr.png" />
    </div>
  </div>
  <div class="clear"></div>

  <!-- 轮播 -->
  <div class="aui-m-slider">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in Recommend" :key="item.id">
        <img :src="item.cover_cdn" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div class="clear"></div>

  <!-- 分类 -->
  <div class="lqgwBox">
    <ul>
      <li v-for="item in Type" :key="item.id">
        <router-link
          :to="{ path: '/product/product/index', query: { typeid: item.id } }"
        >
          <img :src="item.cover_cdn" />
          <p>{{ item.name }}</p>
        </router-link>
      </li>
    </ul>
  </div>
  <div class="clear"></div>

  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>
  <div class="clear"></div>
  <!-- 新品 -->
  <ul class="proul">
    <li v-for="item in News" :key="item.id">
      <div class="con">
        <router-link
          :to="{ path: '/product/product/info', query: { proid: item.id } }"
        >
          <img :src="item.cover_cdn" />
          <p><span>￥</span>{{ item.price }}</p>
        </router-link>
      </div>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="adBox">
    <img src="/assets/images/banner.jpg" />
  </div>
  <div class="clear"></div>

  <div class="contitbox">
    <p>热销<span>•</span>单品</p>
  </div>
  <div class="clear"></div>
  <!-- 热销单品 -->
  <ul class="proul_2">
    <li v-for="item in Hot" :key="item.id">
      <div class="con">
        <router-link
          :to="{ path: '/product/product/info', query: { proid: item.id } }"
        >
          <img :src="item.cover_cdn" />
          <p><span>￥</span>{{ item.price }}</p>
        </router-link>
      </div>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="h54"></div>
  <div class="clear"></div>
  <!-- 分类 -->
  <van-popup v-model:show="ShowType" position="right">
    <div class="type">
      <van-sidebar v-model="active" >
        <van-sidebar-item
          v-for="(item,index) in Type"
          :title="item.name"
          :key="item.id"
          @click="changeType(item.id,index)"
        />
      </van-sidebar>
    </div>
  </van-popup>
</template>
<script>
import { ref } from "vue";
export default {
  emits: ["toggle"],
  created() {
    this.$emit("toggle", true);

    //触发，获取首页数据
    this.productIndexData();
  },
  data() {
    return {
      checked: true,
      ShowType: false,
      //推荐商品
      Recommend: [],
      //分类
      Type: [],
      //新品
      News: [],
      //热销
      Hot: [],
      active: null,
    };
  },
  methods: {
    // 获取首页的数据
    async productIndexData() {
      var result = await this.$api.productIndex();

      if (result.code == 1) {
        var data = result.data;
        this.Recommend = data.Recommend;
        this.Type = data.Type;
        this.News = data.News;
        this.Hot = data.Hot;
      }
    },
    // 跳转到产品首页
    ShowProductIndex() {
      this.$router.push("/product/product/index");
    },
    //跳转到产品首页，传分类ID
    changeType(id,index) {
      this.active = index;
      this.$router.push({
        path: '/product/product/index',
        query: { typeid: id }
      });
      this.ShowType = false;
    },
  },
};
</script>

<style>
.type .van-sidebar {
  width: 100px;
  height: 95vh;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  margin-top: 5vh;
}
</style>

